<!--
 * @Description:地图数据列表 right
 * @Version: 2.0
 * @Author: zhao
 * @Date: 2022-06-17 14:31:07
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-05 16:29:29
-->
<template>
    <div class="mapList">
        <div class="mapList_title">
            <span>地质资料列表</span>
            <span>检索结果{{ $store.state.table.PaginationData.total }}条</span>
        </div>
        <div style="overflow: hidden">
            <div class="mapList_search">
                <div class="label">矿种：</div>
                <div class="model">
                    <el-select
                        v-model="form.mineral"
                        filterable
                        allow-create
                        clearable
                        default-first-option
                        placeholder="请选择"
                        @change="onSubmit()"
                    >
                        <el-option v-for="item in mineralSpeciesOption" :key="item.id" :label="item.mineral" :value="item.mineral"> </el-option>
                    </el-select>
                </div>
            </div>

            <div class="mapList_search">
                <div class="label">资料类别：</div>
                <div class="model">
                    <el-select v-model="form.category" placeholder="请选择" clearable @change="onSubmit()">
                        <el-option v-for="item in category" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>

            <div class="mapList_search">
                <div class="label">
                    <el-select v-model="form.summary" placeholder="请选择" clearable @change="handleSelect">
                        <el-option v-for="item in summary" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="model">
                    <el-input v-model="form.desc" clearable @keyup.enter.native="onSubmit" />
                </div>
            </div>
            <div style="text-align: right; width: 100%">
                <el-button type="primary" @click="onSubmit" class="inquire">查询</el-button>
            </div>
        </div>
        <ul>
            <li
                v-for="(i, index) in list"
                :key="index"
                class="mapList_data cursor"
                @mouseenter="mouseenterMapData(i, index)"
                @mouseleave="mouseleaveMapData(i, index)"
                @click="open(i)"
            >
                <!-- <el-divider /> -->
                <p>
                    <span class="point point_red" ref="point">{{ index + 1 }}</span>
                    <!-- <span>提名：</span> -->
                    <span class="cursor" style="width: calc(100% - 50px)">{{ i.title }}</span>
                </p>
                <!-- <p>
                    作者：<span>{{ i.Author }}</span>
                </p>
                <p>
                    形成单位：<span>{{ i.Company }}</span>
                </p>
                <p>
                    档案号：<span>{{ i.Reference }}</span>
                </p>
                <p>
                    摘要：<span class="ellipsis">{{ i.Abstract }}</span>
                </p> -->
            </li>
        </ul>
        <zpagination style="padding-top: 10px" :small="true" />
    </div>
</template>

<script>
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from "ol/style"

import imgblue from "@/assets/zuobiao_blue.png"
import imgred from "@/assets/zuobiao_red.png"
import zpagination from "@/components/zTable/pagination.vue"
export default {
    components: { zpagination },
    props: {
        sourceArr: Object,
    },
    data() {
        return {
            form: {},
            category: [
                { value: "区域地质调查" },
                { value: "矿产勘查" },
                { value: "水工环地质勘查" },
                { value: "物化遥勘查" },
                { value: "油气地质" },
                { value: "海洋地质" },
                { value: "地质科学研究" },
                { value: "技术方法" },
                { value: "其他" },
            ],
            summary: [
                { value: "abstract", label: "内容摘要" },
                { value: "title", label: "档案名称" },
                { value: "formInstitution", label: "报告形成单位" },
                { value: "author", label: "编著者" },
            ],
            list: [],
            mineralSpeciesOption: [],
        }
    },
    watch: {
        "$store.state.map.mapList"(val) {
            this.list = val
        },
        "$store.state.map.isLeft"(val) {
            if (val) this.form = {}
        },
        "$store.state.table.clearQueryCondition"(val) {
            if (val) this.form = {}
        },
        // "$store.state.table.searchData": {
        //     handler: function (val, oldVal) {
        //         this.form = {}
        //     },
        //     immediate: true,
        //     deep: true,
        // },
    },
    activated() {
        this.onSubmit()
    },
    mounted() {
        this.MineralInfo()
        this.list = this.$store.state.map.mapList
        this.$store.state.table.PaginationData.layout = "total, sizes, prev, pager, next"
    },
    methods: {
        //划上
        mouseenterMapData(data, index) {
            this.$refs.point[index].className = "point point_blue"
            const Feature = this.$store.state.map.SourceVec.getFeatures()[index]
            Feature.setStyle(() => {
                return new Style({
                    image: new Icon({
                        src: imgblue,
                        opacity: 1,
                        scale: "1", // 图片缩放比例
                    }),
                })
            })
            Feature.changed()
        },
        mouseleaveMapData(data, index) {
            this.$refs.point[index].className = "point point_red"
            const Feature = this.$store.state.map.SourceVec.getFeatures()[index]
            Feature.setStyle(() => {
                return new Style({
                    image: new Icon({
                        src: imgred,
                        opacity: 1,
                        scale: "1", // 图片缩放比例
                    }),
                })
            })
            Feature.changed()
        },
        /**
         *  刚用openlayer  不会用
         * 梳理下逻辑
         * 总查询条件 ：this.$store.state.table.searchData
         * 右侧查询条件 ：this.form
         * 点击分页 调取getTableData 需要this.$store.state.table.searchData 和 this.$store.state.table.url
         * 左右抽屉还有各自的调取getResultFromPoints方法
         * selectType: "first",//查询类型 ：行政区划:first、图幅号:second、坐标:third
         *
         * */
        async onSubmit() {
            let form = { ...this.$store.state.table.searchData }
            this.$store.state.map.selectType = "no"
            this.$store.state.table.url = "map/getResultFromPoints"
            form.pageIndex = 1
            form[this.form.summary] = this.form.desc
            if (!this.form.summary) {
                form.abstract = ""
                form.title = ""
                form.formInstitution = ""
                form.author = ""
            }
            form.mineral = this.form.mineral
            form.category = this.form.category
            this.$store.state.table.searchData = form

            const { data, count } = await this.$store.dispatch("map/getResultFromPoints", form)
            this.$store.state.table.PaginationData.total = count
            data.map((e) => {
                e.LonLat = this.getCentralData(e.maxX, e.maxY, e.minX, e.minY)
            })
            this.$store.state.map.mapList = data
        },
        open(data) {
            this.$store.commit("table/SET_ROWDATA", data)
            // this.$router.push({ name: "FileInfoDetails", params: { type: "SpatialRetrieval", searchData: this.$store.state.table.searchData } })
          let routerJump =  this.$router.resolve({
                path:'/FileInfoDetails',
                params: { type: "SpatialRetrieval", searchData: this.$store.state.table.searchData }
            })
            window.open(routerJump.href, '_blank');
        },
        //获取中心坐标
        getCentralData(oneLon, oneLat, twoLon, twoLat) {
            //oneLon：第一个点的经度；oneLat：第一个点的纬度；twoLon：第二个点的经度；twoLat：第二个点的纬度；
            let aLon = 0,
                aLat = 0
            let bLon = Number(oneLon) - Number(twoLon)
            let bLat = Number(oneLat) - Number(twoLat)
            //Math.abs()绝对值
            if (bLon > 0) {
                aLon = Number(oneLon) - Math.abs(bLon) / 2
            } else {
                aLon = Number(twoLon) - Math.abs(bLon) / 2
            }
            if (bLat > 0) {
                aLat = Number(oneLat) - Math.abs(bLat) / 2
            } else {
                aLat = Number(twoLat) - Math.abs(bLat) / 2
            }
            return [aLon, aLat]
        },
        handleSelect(val) {
            this.$set(this.form, "desc", "")
        },
        initSearchData() {
            this.form.abstract = ""
            this.form.title = ""
            this.form.formInstitution = ""
            this.form.author = ""
        },
        async MineralInfo() {
            const { data } = await this.$store.dispatch("search/MineralInfo")
            try {
                this.mineralSpeciesOption = data
            } catch {}
        },
    },
}
</script>

<style scoped lang="scss">
.mapList {
    padding: 10px;
    margin-right: 20px;
}

.mapList_search {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .label {
        width: 30%;
        padding: 0 10px;
        text-align: right;
    }

    .model {
        width: 70%;
    }

    .el-select {
        width: 100%;
    }
}

.mapList_title {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;

    span:first-child {
        font-size: 24px;
    }

    span:last-child {
        font-size: 14px;
        color: rgb(143, 141, 141);
    }
}

ul {
    width: 100%;
    padding: 10px;
    max-height: calc(100vh - 7rem);
    overflow-y: scroll;

    &::-webkit-scrollbar {
        display: none;
    }

    li {
        color: #2b81ff;

        // padding-top: 10px;
        p {
            margin: 0;
            display: flex;
            align-items: self-start;

            span {
                display: inline-block;
            }

            span:last-child {
                line-height: 26px;
                padding-top: 10px;
            }

            .point {
                background-size: 100% 100%;

                width: 40px;
                height: 40px;
                line-height: 0.503333rem;
                text-align: center;
                color: white;
                margin-bottom: 20px;
            }

            .point_red {
                background: url("../../../../assets/zuobiao_red.png") no-repeat;
            }

            .point_blue {
                background: url("../../../../assets/zuobiao_blue.png") no-repeat;
            }

            &:hover {
                background: #f6f6f6;
            }
        }
    }

    li:hover {
        background: #f6f6f6;
    }
}

.inquire {
    color: #fff;
    background-color: #194485;
    border-color: #194485;
}
</style>
